<style lang="scss" scoped>
    @import '@/assets/css/index';
    .getMoneyRecord{
        @include page();
        .box{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            background-color: white;
            margin-top: 1px;
            .line{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }
        }
    }
</style>
<template>
    <div class="getMoneyRecord">
        <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" offset="100" @load="balancePage" >
                <div class="box padding-all-m" v-for="item in list" :key="item.id">
                    <div class="line"><span>{{item.reason=='商家提现'?'-':'+'}}{{item.balance}}￥</span> <span>{{item.reason}}</span><span class="color-s">{{item.createtime}}</span></div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { List,PullRefresh } from 'vant'
export default {
    name: 'GetMoneyRecord',
    components: {
        [List.name]: List,
        [PullRefresh.name]: PullRefresh,
    },
    data () {
        return {
            pageNo:1,
            pageSize: 20,
            list:[],
            userInfo:'',
            loading:false,
            finished:false,
            loadingRefresh:false
        }
    },
    mounted () {
        this.userInfo = this.$store.state.userInfo
        if(!this.userInfo){
            this.$router.go(-1)
            return
        }
        this.balancePage()
    },
    methods: {
        onRefresh() {
            this.pageNo = 1;
            this.list = [];
            this.balancePage();
        },
        balancePage() {
            const _this = this
            let params = {
                // merchant_id: this.userInfo.id,
                openid: this.userInfo.openid,
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }
            this.loading = true
            this.loadingRefresh = true
            _this.$request.BalancePage(params).then(res=>{
                _this.list.push(...res.data.data)
                if(_this.pageNo >= (Math.ceil(res.data.totalCount/_this.pageSize))){
                    _this.finished = true;
                }else{
                    _this.pageNo++
                }
            }).finally(()=>{
                console.log('finally')
                this.loadingRefresh = false;
                this.loading = false;
            })
        }
    }
}
</script>